<template>
  <view class="addressPage">
    <view class="address-list">
      <view v-for="(item, idx) in addressList" :key="item.id" class="address-item">
        <view class="address-item-header">
          <text class="address-item-name">{{ item.name }} {{ item.mobile }}</text>
          <uv-icon name="close" size="20" color="#bcbcbc" @click="onDelete(item, idx)" />
        </view>
        <view class="address-item-detail">{{ item.detail }}</view>
        <view class="address-item-footer">
          <view class="address-item-default">
            <uv-icon v-if="item.isDefault" name="checkbox-mark" color="#f74c31" size="18" customStyle="margin-right:4rpx;" />
            <uv-icon v-else name="checkbox-blank" color="#bcbcbc" size="18" customStyle="margin-right:4rpx;" />
            <text :class="item.isDefault ? 'default-active' : 'default-normal'">
              {{ item.isDefault ? '已设默认' : '默认' }}
            </text>
          </view>
          <view class="address-item-actions">
            <uv-button size="small" type="default" shape="circle" @click="onCopy(item)">复制</uv-button>
            <uv-button size="small" type="default" shape="circle" @click="onEdit(item)">修改</uv-button>
          </view>
        </view>
      </view>
    </view>
    <view class="address-add-btn">
      <uv-button type="error" shape="circle" size="large" @click="onAdd">+新建收货地址</uv-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [
        {
          id: 1,
          name: '王麻子',
          mobile: '15212341234',
          detail: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX详情地址',
          isDefault: false
        },
        {
          id: 2,
          name: '王麻子',
          mobile: '15212341234',
          detail: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX详情地址',
          isDefault: true
        }
      ]
    }
  },
  methods: {
    onDelete(item, idx) {
      // 删除逻辑
    },
    onCopy(item) {
      // 复制逻辑
    },
    onEdit(item) {
      // 跳转编辑
    },
    onAdd() {
      // 跳转新建
	  uni.navigateTo({
	  	url: "/pages/addressManage/edit"
	  })
    }
  }
}
</script>

<style scoped>
.addressPage {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.address-list {
  padding: 0 0 24rpx 0;
}
.address-item {
  background: #fff;
  border-radius: 12rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx #f2f2f2;
}
.address-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 30rpx;
  color: #222;
}
.address-item-detail {
  margin: 16rpx 0 0 0;
  color: #666;
  font-size: 26rpx;
  word-break: break-all;
}
.address-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18rpx;
}
.address-item-default {
  display: flex;
  align-items: center;
}
.default-normal {
  color: #bcbcbc;
  font-size: 24rpx;
}
.default-active {
  color: #f74c31;
  font-size: 24rpx;
}
.address-item-actions {
  display: flex;
  gap: 16rpx;
}
.address-add-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40rpx;
  padding: 0 32rpx;
  background: transparent;
}
</style>